<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="疫苗预约"
      @click-left="$router.go(-1)"

      left-arrow
    />
    <!-- 分类框选项 -->
    <div class="choose">
      <van-row class="row">
        <van-col span="6">
          <div @click="chooseAll">综合排序</div>
        </van-col>
        <van-col span="6">
          <div @click="chooseaddress">距离优先</div>
        </van-col>
        <van-col span="6">
          <div @click="choosescore">评分优先</div>
        </van-col>
        <van-col span="6">
          <div @click="choosethree(3)">三甲</div>
        </van-col>
        <van-col span="6">
          <div @click="choosethree(2)">二甲</div>
        </van-col>
        <van-col span="6">
          <div @click="choosethree(1)">一甲</div>
        </van-col>
      </van-row>
    </div>

    <!-- 背景灰色盒子 -->
    <div class="backgroundbox">
      <!-- 医院信息 -->
      <div class="hospitalmsg" v-for="(item, index) in list" :key="index">
        <router-link :to="`/hospitaldetails?id=${item.id}`">
          <!-- 医院图片 -->
          <div class="articleimg">
            <van-image
              round
              width="4rem"
              height="4rem"
              :src="`/images/${item.image}`"
            />
          </div>
        </router-link>
        <!-- 医院信息 -->
        <div class="details">
          <!-- 医院名称 -->
          <div>{{ item.name }}</div>
          <!-- 特色科室 -->
          <div class="special_office">特色科室:{{ item.special_office }}</div>
          <!-- 地址 -->
          <div class="address">
            {{ item.distance + "km" }} | {{ item.address }}
          </div>
          <!-- 标签 评分 -->
          <div class="store">
            <div class="tag">{{ item.grade | comgrade }}</div>
            &nbsp;&nbsp;
            <van-rate
              v-model="item.score"
              allow-half
              void-icon="star"
              void-color="#eee"
              color="#ee0a24"
              readonly
              size="17px"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="tabber">
      <tabber></tabber>
    </div>
  </div>
</template>

<script>
import Tabber from "../components/Tabber.vue";
export default {
  components: { Tabber },
  data() {
    return {
      list: [],
      value: 2.5,
    };
  },
  mounted() {
    this.chooseAll();
  },
  filters: {
    comgrade: function (value) {
      if (value == 1) {
        return "一甲";
      } else if (value == 2) {
        return "二甲";
      } else {
        return "三甲";
      }
    },
  },
  methods: {
    // 地址排序
    chooseaddress() {
      this.axios.get(`${this.$base}hospital/distance`).then((res) => {
        this.list = res.data.data;
      });
    },
    // 评分排序
    choosescore() {
      this.axios.get(`${this.$base}hospital/score`).then((res) => {
        this.list = res.data.data;
      });
    },
    // 标签排序
    choosethree(value) {
  
      this.axios
        .get(`${this.$base}hospital?grade=${parseInt(value)}`)
        .then((res) => {
    
          this.list = res.data.data;
        });
    },
    // 综合排序
    chooseAll() {
      this.axios
        .get(`${this.$base}hospital/id`)
        .then((res) => {
    
          this.list = res.data.data;
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang='less' scoped>
.van-nav-bar {
  background-color: #1074ff;

  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}
.backgroundbox {
  width: 100%;
  background-color: #f8f8f8;
}
.choose {
  text-align: center;
  /* position: sticky; */
  /* left: 0; */
  /* top: 5px;
  z-index: 999;
  background-color: white;*/
}
.row {
  width: 90%;
  margin: auto;
}
.store {
  display: flex;
}
.van-col > div {
  width: 90%;
  border: 1px solid white;
  border-radius: 25px;
  background-color: #f5f5f5;
  font-size: 10px;
  margin: 5px 5px;
  padding: 5px 0;
}
.van-col > div:hover {
  border: 1px solid #1074ff;
  color: #1074ff;
}
.special_office {
  width: 80%;
  overflow: hidden;
}
.hospitalmsg {
  display: flex;
  align-items: center;
  padding-top: 10px;
  width: 95%;
  background-color: white;
  margin: 0 auto;
  color: black;
}
.articleimg {
  margin-bottom: 20px;
  margin-left: 10px;
  float: left;
}
.tabber {
  margin-top: 50px;
  overflow: hidden;
}
.tag {
  width: 40px;
  height: 20px;
  background-color: #1074ff;
  color: white;
  text-align: center;
  border-radius: 5px;
}
.address {
  color: #acacac;
  font-size: 14px;
  margin-top: 5px;
}
.details {
  width: 100%;
  margin-left: 20px;
}
.details > :first-child {
  margin-bottom: 5px;
}
</style>